<template>
	<div>
		<main-head><i id="head" class="iconfont icondingdandingdanmingxishouzhimingxi"></i>加盟申请详情
			<span slot="after" @click="$router.go(-1)" type="primary" size="medium" icon="el-icon-plus">
				<span style="font-weight: 700;color: #444444;cursor: pointer;">返回上一页</span>
				<i class="iconfont iconfanhui" style="color: #0482d1;margin-left: 10px;cursor: pointer;"></i>
			</span>
		</main-head>

		<div v-if="show">
			<el-empty description="申请已经不见了哦~"></el-empty>
		</div>
		<div v-else>
			<el-card style="margin-top: 20px" shadow="hover">
				<el-descriptions :column="2" title="申请人" border direction="vertical">
					<el-descriptions-item label="微信昵称" content-class-name="my-content">
						{{form.nick}}
					</el-descriptions-item>
					<el-descriptions-item label="微信头像" content-class-name="my-content">
						<el-image style="width: 100px; height: 100px; border-radius: 50%" :src="form.avatar">
						</el-image>
					</el-descriptions-item>
					<el-descriptions-item label="申请人姓名" content-class-name="my-content">
						{{form.apply.name}}
					</el-descriptions-item>
					<el-descriptions-item label="地址" content-class-name="my-content">
						{{form.apply.province+"-"+form.apply.city+"-"+form.apply.area}}
					</el-descriptions-item>
					<el-descriptions-item label="手机号" content-class-name="my-content">
						{{form.apply.phone}}
					</el-descriptions-item>
					<el-descriptions-item label="田地类型" content-class-name="my-content">
						{{switchType(form.apply.type)}}
					</el-descriptions-item>			
					<el-descriptions-item label="审核状态" content-class-name="my-content">
						<span v-html="getAuditStatus()"></span>
					</el-descriptions-item>
					<el-descriptions-item label="拒绝原因" content-class-name="my-content" v-if="form.apply.status==-1">
						<span style="color: red;">{{form.apply.refuseReason}}</span>
					</el-descriptions-item>
				</el-descriptions>
			</el-card>
			<el-card style="margin-top: 20px;" shadow="hover" v-if="form.apply.hasPartner==1">
				<span style="font-size: 18px;font-weight: 900;">合伙人信息</span>
				<br />
				<el-row>
					<div v-for="(item,index) in form.apply.partnerInfo">
						<el-col :span="8">
							<el-descriptions :column="1" title="" border style="margin: 10px;">
								<el-descriptions-item label="微信昵称" content-class-name="my-content"
									label-class-name="my-label">
									{{item.nick}}
									<span v-if="item.usId==form.apply.usId" style="color: red;">(申请人)</span>
								</el-descriptions-item>
								<el-descriptions-item label="微信头像" content-class-name="my-content"
									label-class-name="my-label">
									<el-image style="width: 100px; height: 100px; border-radius: 50%"
										:src="item.avatar">
									</el-image>
								</el-descriptions-item>
								<el-descriptions-item label="真实姓名" content-class-name="my-content"
									label-class-name="my-label">
									{{item.name}}
								</el-descriptions-item>
								<el-descriptions-item label="手机号" content-class-name="my-content"
									label-class-name="my-label">
									{{item.phone}}
								</el-descriptions-item>
								<el-descriptions-item label="收益占比(百分比)" content-class-name="my-content"
									label-class-name="my-label">
									{{item.shares}}%
								</el-descriptions-item>
							</el-descriptions>
							<br />
							<el-divider></el-divider>
						</el-col>
					</div>
					
				</el-row>
			</el-card>
			<div style="margin-left: 40%;" v-if="form.apply.status==0">
				<el-button type="success" @click="yes()">通 过</el-button>
				<el-button type="warning" @click="dialog=true">拒 绝</el-button>
			</div>
		</div>
		<!-- 弹框 -->
		<el-dialog title="审核" :visible.sync="dialog" width="30%">
			<el-form :rules="rule" :model="auditForm" ref="audit">
				<el-form-item label="拒绝原因" :label-width="formLabelWidth" prop="refuseReason">
					<el-input v-model="auditForm.refuseReason" placeholder="请输入拒绝原因"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="no()">确定</el-button>
				<el-button type="info" @click="dialog = false">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import editor from '@/components/utils/CustomWangEditor';

	export default {
		components: {
			editor
		},
		data() {
			return {
				dialog: false,
				show: false,
				id: "",
				form: {},
				auditForm: {
					id: "",
					status: "",
					refuseReason: ""
				},
				rule: {
					refuseReason: {
						message: "请输入拒绝原因",
						required: true
					},
				}
			};
		},

		mounted() {
			let url = this.$route.fullPath;
			if (url.indexOf("?") != -1) {
				let id = url.substr(url.indexOf("=") + 1);
				this.getInfo(id);
				this.auditForm.id = id
			} else {
				this.show = true
			}
		},

		methods: {
			yes() {
				this.$confirm("请确认是否通过审核", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.auditForm.status = 1
					this.audit()
				})
			},
			no() {				
				this.$refs["audit"].validate((valid) => {
					if (valid) {
						this.auditForm.status = -1
						this.audit()
					}
				})
			},
			switchType(type) {
				switch (type) {
					case 0:
						return "采摘"
					case 1:
						return "种植"
					case 2:
						return "采摘和种植"
				}
			},
			audit() {
				this.$request.post({
					url: "admin/adUsInfo/audit",
					params: this.auditForm,
					success: (result) => {
						console.log(result);
						this.$message.success(result);
						this.dialog=false
						this.getInfo(this.auditForm.id)
						this.auditForm={
							status:"",
							refuseReason:""
						}
					},
				});
			},
			getInfo(id) {
				this.$request.post({
					url: "admin/adUsInfo/auditDetail",
					params: {
						id
					},
					success: (result) => {
						this.form = result
						this.form.apply.partnerInfo = JSON.parse(result.apply.partnerInfo.replace("\\", ""))
						console.log(this.form)
					},
					error: () => {
						this.show = true
					},
				});
			},
			getAuditStatus() {
				switch (this.form.apply.status) {
					case 0:
						return "<font style='color: #3c86ef'>审核中</font>"
					case 1:
						return "<font style='color: #409eff'>已通过</font>"
					case -1:
						return "<font style='color: red'>已拒绝</font>"
				}
			}
		},
	};
</script>

<style>
	#head {
		color: #0949D1;
		font-size: 30px;
	}

	.label {
		margin-top: 10px;
		color: #0482d1;
	}

	.my-content {
		margin-top: 10px;
		border-radius: 10%
	}

	.el-descriptions-item__label.is-bordered-label {
		font-weight: bold;
		color: #61645f;
		background: #fafafa;
	}

	el-card {}
</style>
